<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>抽奖--老虎机</title>
</head>

<body>
  <div id="my-lucky"></div>

  <script src="https://cdn.jsdelivr.net/npm/lucky-canvas@1.7.11"></script>
  <script>
    const myLucky = new LuckyCanvas.SlotMachine('#my-lucky', {
      width: '240px',
      height: '180px',
      blocks: [
        { padding: '10px', background: '#869cfa' },
        { padding: '10px', background: '#e9e8fe' },
      ],
      slots: [
        { speed: 3, direction: 1 },
        { speed: 3, direction: -1 },
        { speed: 3, direction: 1 },
      ],
      prizes: [
        {
          background: '#bac5ee',
          borderRadius: '10px',
        },
        {
          background: '#bac5ee',
          borderRadius: '10px',
        },
      ],
      defaultConfig: {
        rowSpacing: '20px',
        colSpacing: '10px'
      }
    })
    // 默认转动
    myLucky.play()
  </script>
</body>

</html>